<template>
	<view class="page bg-white">
		<!-- 标题栏 start -->
		<fu-custom :isBack="true" :isBottom="true" bgColor="bg-white">
			<block slot="content">{{i18n['注销账号']}}</block>
		</fu-custom>
		<view class=" ">
			<view class="padding-lr">
				<view class="padding-tb solid-bottom">
          <view class="margin-bottom fu-fs32 text-bold text-333">{{i18n['账号注销']}}</view>
          <view class="fu-fs28 text-333">{{i18n['永久注销且无法恢复，请谨慎操作']}}</view>
        </view>
        <view class="padding-tb solid-bottom">
          <view class="fu-fs32 text-bold text-333">{{i18n['请选择注销账号的原因：']}}</view>
          <block v-for="(item, index) in reasonList" :key="index">
            <view @click="onChangeReson(item.name)" class="flex align-center justify-between margin-top">
				<view class="fu-fs28">{{ item.name }}</view>
              <image class="fu-block-36 margin-right-sm" src="@/static/x1.png" mode="aspectFit" v-if="item.name == unset_type"></image>
              <image class="fu-block-36 margin-right-sm" src="@/static/x0.png" mode="aspectFit" v-else></image>
            </view>
          </block>
        </view>
        <view class="padding-tb solid-bottom">
          <view class="margin-bottom fu-fs32 text-bold text-333">{{i18n['请填写注销原因：']}}</view>
          <textarea class="padding-sm text-333 fu-fs28 height-200 radius-8 margin-top margin-bottom radius-8 solid w100" placeholder-class="text-999"
          	v-model="unset_reason" :placeholder="i18n['请填写注销原因：']"></textarea>
        </view>
			</view>
			<view class="padding-lr">
				<view class="login-btn" @click="handleNext">
					{{i18n['下一步']}}
				</view>
			</view>

		</view>
		<!-- 断网监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 断网监测 end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				unset_reason: '', //注销原因
        unset_type: '', // 注销类型
				reasonList: [],
			}
		},
		onLoad() {
			this.cancelType()
		},
		methods: {
			onChangeReson(name) {
				if (this.unset_type == name) return;
				this.unset_type = name;
			},
			/**
			 * @description 获取注销原因数据
			 */
			cancelType() {
				this.$api.post(global.apiUrls.cancelType).then(res => {
          if (res.data.code == 1) {
            let result = res.data.data;
            this.reasonList = result; //获取反馈类型数据
            this.unset_type = this.reasonList[0].name;
          }
        }).catch(err => {
          console.log(err);
        });
			},
			handleNext() {
				if (!this.unset_reason) {
					return this.$message.info('请填写注销原因')
				}
        this.$urouter.redirectTo({
          url: '/pages/index/setting/cancel-account/affirm-cancel-account/index',
          params: {
            unset_reason: this.unset_reason,
            unset_type: this.unset_type,
          }
        })
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 800rpx;
	}

	.login-btn {
		height: 88rpx;
		line-height: 88rpx;
		background: $bgtheme;
		border-radius: 80rpx;
		margin: 100rpx 0 0;
		font-size: 32rpx;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;
	}
</style>
